<!--
 * @Author: liyin 2179253556@qq.com
 * @Date: 2025-09-23 09:20:18
 * @LastEditors: liyin 2179253556@qq.com
 * @LastEditTime: 2025-11-05 09:26:18
 * @FilePath: \new-face-ordering-data-screen\src\components\screenCenterTwo.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="screenCenterTwo" :style="{ height: props.screenCenterTwoHeight + 'px' }">
    <Title :isbig="true">
      <template #title>
        今日用餐率统计
      </template>
    </Title>
    <div class="mealList" v-if="props.list.length > 0">
      <div class="items" v-for="(itemn, indexn) in props.list" :key="indexn">
        <div class="mealGrade">{{ itemn.faculty_name }}用餐率</div>
        <div class="mealright">
          <div class="columntitle">
            <div>年级</div>
            <div>早餐</div>
            <div>午餐</div>
            <div>晚餐</div>
            <div>宵夜</div>
            <div>其他</div>
          </div>
          <div class="detailItemd" :style="indexn == 0 ? 'color: #66FFFF;' : 'color: #FC9A19;'"
            v-for="(iteml, indexl) in itemn.grade_list" :key="indexl">
            <div>{{ iteml.grade_name}}</div>
            <div>{{ parseInt(iteml.mealtime_1_rate) }}%</div>
            <div>{{ parseInt(iteml.mealtime_2_rate) }}%</div>
            <div>{{ parseInt(iteml.mealtime_3_rate) }}%</div>
            <div>{{ parseInt(iteml.mealtime_4_rate) }}%</div>
            <div>{{ parseInt(iteml.mealtime_5_rate) }}%</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted } from 'vue'
interface PropsType {
  //   是否需要更多按钮
  screenCenterTwoHeight?: any
  list?: any
}
const props = withDefaults(defineProps<PropsType>(), {
  screenCenterTwoHeight: 364,
  list: {},
})
onMounted(async () => {})
</script>
<style lang="scss" scoped>
.screenCenterTwo {
  background: rgba(0, 40, 87, 0.4);

  .mealList {
    width: 100%;
    padding: 30px 12px 0 12px;
    box-sizing: border-box;
    display: flex;

    .items {
      flex: 1;
      margin: 0 12px;

      .mealGrade {
        height: 48px;
        line-height: 48px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        border-radius: 4px;

        margin-bottom: 20px;
      }

      .mealright {
        .columntitle {
          width: 100%;
          display: flex;
          align-items: center;
          height: 48px;
          line-height: 48px;
          font-size: 16px;
          font-weight: bold;
          background: #0A3E74;

          div {
            text-align: center;
            flex: 1;
          }
        }

        .detailItemd {
          width: 100%;
          display: flex;
          align-items: center;
          height: 48px;
          line-height: 48px;
          font-size: 16px;
          font-weight: bold;
          color: #66FFFF;

          div {
            text-align: center;
            flex: 1;
          }
        }
      }
    }

    .items:first-of-type {
      .mealGrade {
        color: #46EDE8;
        background: rgba(70, 237, 232, 0.1);
      }
      .columntitle {
        background: #0A3E74;
      }
      .detailItemd:nth-of-type(2n+1){
        background: #0A3D73;
      }
    }

    .items:last-of-type {
      .mealGrade {
        color: #FDAA1B;
        background: rgba(253, 170, 27, 0.1);
      }
      .columntitle {
        background: #1C355B;
      }
      .detailItemd:nth-of-type(2n+1){
        background: #1C355B;
      }
    }
  }
}
</style>
